<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>环形旋转木马视图切换</title>
    <link rel="stylesheet" href="carousel.css">

	<link rel="stylesheet" href="../../plugins/swiper/swiper-bundle.min.css">
	<script src="../../plugins/swiper/swiper-bundle.min.js"></script>
<style>
	@charset "utf-8";
	/* CSS Document */
	body{
		padding: 0;
		margin: 0;
	}
	#carousel {
		position: relative;
		width: 1200px;
		margin: 0 auto
	}

	#carousel .swiper {
		padding-top: 20px;
		padding-bottom: 40px;
	}
	#carousel .swiper-wrapper{

	}
	#carousel  .swiper-slide {
		width: 300px;
		background: #fff;
		box-shadow: 0 8px 20px #ddd;


	}
	#carousel  .swiper-slide img{
		display:block;
		width: 100%;
	}
	#carousel  .swiper-slide p {
		line-height: 58px;
		padding-top: 0;
		text-align: center;
		color: #636363;
		font-size: 0.8em;
		margin: 0;
	}

	#carousel .swiper-pagination {
		width: 100%;
		bottom: 20px;
	}

	#carousel .swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 5px;
		background-color: #e8f5ff;
		width: 20px;
		height: 10px;
		opacity: 1;
		border-radius: 5px;
	}

	#carousel .swiper-pagination-bullets .swiper-pagination-bullet-active {
		background-color: #3eb2f3;
		width: 35px;
	}

	#carousel .swiper-button-prev {
		left: -30px;
		width: 45px;
		height: 45px;
		background: url(../img/images/wm_button_icon.png) no-repeat;
		background-position: 0 0;
		background-size: 100%;
	}

	#carousel .swiper-button-prev:hover {
		background-position: 0 -46px;
		background-size: 100%
	}

	#carousel .swiper-button-next {
		right: -30px;
		width: 45px;
		height: 45px;
		background: url(../img/images/wm_button_icon.png) no-repeat;
		background-position: 0 -93px;
		background-size: 100%;
	}

	#carousel .swiper-button-next:hover {
		background-position: 0 -139px;
		background-size: 100%
	}
	#carousel .swiper-button-prev::after,#carousel .swiper-button-next::after{
		content: '';
	}
</style>
</head>

<body>
  <div id="carousel">
	<div class="swiper swiper-3d">
	<div class="swiper-wrapper">
	<div class="swiper-slide"><a href=""><img src="../img/images/carousel01.png" /></a><p>北京冬奥会迎来倒计时一个月1</p></div>
	<div class="swiper-slide"><img src="../img/images/carousel02.png" /><p>北京冬奥会迎来倒计时一个月2</p></div>
	<div class="swiper-slide"><img src="../img/images/carousel03.png" /><p>北京冬奥会迎来倒计时一个月3</p></div>
	<div class="swiper-slide"><img src="../img/images/carousel04.png" /><p>北京冬奥会迎来倒计时一个月4</p></div>
	<div class="swiper-slide"><img src="../img/images/carousel05.png" /><p>北京冬奥会迎来倒计时一个月5</p></div>
	</div>
	</div>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
  </div>

<script>
slideW = 300;//一张图300px, 每面四张角度22.5（PI/8），中心角度PI/16
radius = slideW*0.5/Math.sin(Math.PI/16);//半径。圆心并不是视点中心，视点在1200px

carouselSwiper = new Swiper('#carousel .swiper', {
	watchSlidesProgress: true,
	slidesPerView: 'auto',
	centeredSlides: false,
	loop: true,
	loopedSlides: 4,
	grabCursor:true,
//	autoplay: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
		//clickable :true,
	},
	on: {
		progress: function(swiper, progress) {
			for (i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i);
				var slideProgress = this.slides[i].progress;
				translateX = (slideProgress+1.5)*( slideW/3 - Math.cos((slideProgress+1.5)*0.125*Math.PI)*slideW*1.1/3) + 'px';//调整图片间距，根据图片宽度改变数值实现自适应
				rotateY = (slideProgress+1.5)*22.5 ;//图片角度
				translateZ = ( radius - Math.cos((slideProgress+1.5)*0.125*Math.PI)*radius - 150) + 'px';//调整图片远近，刚好4个在画框内
				slide.transform('translateX(' + translateX + ') translateZ(' + translateZ + ') rotateY(' + rotateY + 'deg)');

			}
		},
		setTransition: function(swiper, transition) {
			for (var i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i)
				slide.transition(transition);
			}

		}
	}

})
</script>
</body>
</html>
